<template>
  <div class="box-main1">
    <div class="box-header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }">控制台</el-breadcrumb-item>
        <el-breadcrumb-item>站内信息管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box-main2">
      <div class="box-search2">
        <div class="box-input2">
          <el-button size="mini" type="primary" >未读信息</el-button>
          <el-button size="mini" type="primary" >已读信息</el-button>
        </div>

      </div>

      <div class="box-content2">
        <div class="box-table2">
          <el-table class="tbl1" :data="messagePage.list" :stripe="true" size="small">

            <el-table-column type="index" :index="1" label="序号" width="55"></el-table-column>
            <el-table-column label="通知信息" width="400">
              <template slot-scope="scope">
                <span>{{scope.row.message_title}}</span>
              </template>
            </el-table-column>
            <el-table-column label="通知状态" width="120" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.comment_message_state == 1 || scope.row.revert_message_state == 1">未读</span>
              </template>
            </el-table-column>
            <el-table-column label="通知时间" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.str_comment_date != null">{{scope.row.str_comment_date}}</span>
                <span v-if="scope.row.str_revert_date != null">{{scope.row.str_revert_date}}</span>
              </template>
            </el-table-column>

            <el-table-column  label="操作" width="100">
              <template slot-scope="scope">
                <span>
                    <el-button type="success" size="mini" @click="checkZuoye(scope.row)">查看</el-button>
                    <el-button type="danger" size="mini" @click="clkBtnDelete(scope.row)">删除</el-button>
                 </span>
              </template>
            </el-table-column>

          </el-table>
        </div>


        <div class="box-page2">
          <!--                         layout表示需要的显示的内容,用逗号分割,布局元素会依次显示
                             prev表示上一页
                             next为下一页
                             pager表示分页码列表
                表格的分页     total:表示页码数                  -->
          <el-pagination layout="prev, pager, next" :total="messagePage.total"
                         :current-page="messagePage.pageNum" :page-size="messagePage.pageSize"
                         @current-change="chgCurrPage">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import request from '@/common/utils/request';

  export default {
    computed:{
      loginUserInfo(){
        return this.$store.state.loginUserInfo;
      },

    },
    data() {
      return {
        messagePage: {pageNum:1 ,pageSize:12, list:[] },
        pageLoading : false,
      };
    },
    mounted() {
      this._initData();
    },
    watch: {
      $route: {
        handler: function (to, from) {
          if (to.path == '/admin/message_manager') {
            this.getPage();
          }

        }, immediate: true
      },
    },
    methods: {
      _initData(){
        this.getPage();
        this.loadAllPermissions();
      },
      chgCurrPage(val){
        this.messagePage.pageNum = val;
        this.getPage();
      },
      checkZuoye(row){
          this.$router.push({path:'/admin/zuoye_show',query:{id:row.comment_zuoye_noid}});
      },
      getPage(){
        let url1 = this.settings.apiUrl + '/message_manager/page';
        let d1 = {user_noid: this.loginUserInfo.noid, pageNum: this.messagePage.pageNum, pageSize:this.messagePage.pageSize };
        request.post(url1 , d1 ).then((d1r) => {
            this.pageLoading = false;
            if (d1r.code === 0) {
              this.messagePage = d1r.data;
            }else{

              this.$alert('获取用户信息失败：'+d1r.msg, '提示', {
                type: 'warning'

              });

            }
          }).catch(err => {
          _this.pageLoading = false;
        });
      },
      clkBtnDelete(row) {
        this.$confirm("您确定删除该评论吗","提示").then(() => {
          let url1 = this.settings.apiUrl + "/message_manager/delete";
          let d1 = {noid: row.noid, 'user_noid': this.loginUserInfo.noid};
          request.post(url1, d1).then((d1r => {
            if (d1r.code == 0) {
              this.getPage();
              this.$message("您删除成功了");
            } else {
              this.$message("删除失败" + d1r.msg + "提示", {
                type: 'warning'
              });
            }
          }))
        })
      },
      loadAllPermissions () {
        let url1 = this.settings.apiUrl + "/permission/list_all_permission";
        let d1 ={};
        request.post(url1, d1).then(d1r => {
          if (d1r.code == 0) {
            this.allPermissions = d1r.data;
          }

        })
      },
    }

  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .box-header2{
    height: 30px;
    background-color: #eceeef;
    padding-left:20px;
    padding-top:8px;

  }

  .message-pager{
    margin-top: 30px;
  }

  .box-search2{
    display: flex;
  }
  .box-page2{
    display: flex;
    justify-content: flex-end;
  }

  .box-search2{
    padding-bottom: 10px;
    .box-input2{
      padding-right:10px;
    }
  }

</style>
